<template>
	<div class="container">
		<!-- 搜索 -->
		<el-row class="tr">
			<el-button type="primary" size="medium" @click="drawer = true">
				<span class="iconfont">&#xe676;</span>
				<span>新增参数</span>
			</el-button>
		</el-row>
		<my-table
			:table-data="tableData"
			:col-configs="colConfigs"
			:list-loading="listLoading"
			:total="total"
			:page-size="listQuery.pagesize"
			@refreshList="getList"
		>
			<el-table-column label="操作" slot="opt">
				<template slot-scope="scope">
					<span class="iconfont bg-edit" @click="handleEdit(scope)"
						>&#xe679;</span
					>
					<span class="iconfont bg-delete" @click="handleDelete(scope)"
						>&#xe67d;</span
					>
				</template>
			</el-table-column>
		</my-table>
		<el-drawer
			:title="textMap[dialogStatus]"
			:visible.sync="drawer"
			:with-header="false"
		>
			<span>编辑--新增参数!</span>
		</el-drawer>
	</div>
</template>

<script>
import myTable from 'components/myTable'
import { getList } from '@/api/parameter-mg'
export default {
	name: 'MsgManger',
	components: { myTable },
	data () {
		return {
			listQuery: {
				pagesize: 100,
				pageindex: 1,
				custom_query_type: null,
				custom_query_value: null,
				start_date: null,
				end_date: null,
				status: null,
				timeVal: [],
			},
			colConfigs: [
				{
					type: 'index',
					label: '序号',
				},
				{ slot: 'opt' },
				{
					prop: 'name',
					label: '参数名称',
					sortable: false,
				},
				{
					prop: 'msg',
					label: '描述',
					sortable: false,
				},
			],
			tableData: [
				{
					name: 'Architect',
					msg: 'aspernatur-consequatur-explicabo',
				},
				{
					name: 'Architect',
					msg: 'aspernatur-consequatur-explicabo',
				},
				{
					name: 'Architect',
					msg: 'aspernatur-consequatur-explicabo',
				},
				{
					name: 'Architect',
					msg: 'aspernatur-consequatur-explicabo',
				},
				{
					name: 'Architect',
					msg: 'aspernatur-consequatur-explicabo',
				},
			],
			total: 0,
			listLoading: false,
			drawer: false,
			textMap: {
				update: '编辑',
				create: '新增',
			},
			dialogStatus: 'create',
		}
	},
	computed: {},
	created () { },
	mounted () {
		// this.getList()
	},
	methods: {
		getList ( val ) {

      /*
       * h获取任务统计
       * TODO
       */
			delete this.listQuery.timeVal
			const params = Object.assign( this.listQuery, val )
			console.log( params )
			getMsgList( params ).then( res => {
				if ( res.code === 0 ) {
					this.tableData = res.data.listQuery
					this.total = res.data.total
				}
			} )
		},
		handleRefresh () {
			this.getList()
		},
		handleReset ( searchForm ) {
			// 表单重置
			this.$nextTick( () => {
				this.$refs.searchForm.resetFields()
			} )
		},
		handleEdit ( scope ) {
			// 编辑
			this.drawer = true
		},
		handleDelete ( { $index, row } ) {
			this.$confirm( '是否删除?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			} )
				.then( async () => {

          /*
           * 删除 todo
           * await deleteRole(row.key)
           */
					this.tableData.splice( $index, 1 )
					this.$message( {
						type: 'success',
						message: '已删除!',
					} )
				} )
				.catch( err => {
					console.error( err )
				} )
		},
	},
	watch: {},
	filter: {},
}
</script>

<style scoped lang="less">
.container {
	padding: 0 10px;
	.btns {
		margin-bottom: 20px;
	}
}
</style>
